import React,{useState} from 'react'
import { Col, Input, Row, Button,Cascader,DatePicker  } from 'antd';
import {
  HomeOutlined,
  CloudUploadOutlined,
  SearchOutlined
} from '@ant-design/icons';
import '../scss/OverDue.scss'
import CollectionRecordsList from './CollectionRecordsList'
import {CollectionSearch} from '../../../../http/dutoApi'
import { useDispatch, useSelector } from 'react-redux'
import { CollectionSearchAsyncAction } from '../../../../store/dotoStore/action'

export default function OverDue() {

  // 页数
  const [pageSize, setPageSize] = useState('5')
  const [pageSizeNow, setPageSizeNow] = useState('1')

  // 催收编号
  const [code,setCode] = useState('')

  const dispatch = useDispatch()

  const [options,setoption] = useState([
    {
      value: 'PreliminaryCollection',
      label: '预催收',
    },
    {
      value: 'TelephoneCollection',
      label: '电话催收',
    },
    {
      value: 'OutboundCollection',
      label: '外访催收',
    },
    {
      value: 'ViolenceCollection',
      label: '暴力催收',
    }
  ])

  const onChange = (e) => {
    // console.log(e.target.value);
  }

  const onChange2 = (e) => {
    console.log(e.target.value);
    setCode(e.target.value)
  }

  const onChange4 = (e) => {
    // console.log(e);
  }

  const onChange5 = (e) =>{
    // console.log(e[0]._d);
    // console.log(e[1]._d);
  }

  const search = () => {

    console.log('submint');
    // CollectionSearch(pageSizeNow,pageSize,code)
    dispatch(CollectionSearchAsyncAction({
      pageSizeNow,
      pageSize,
      code
    }))
    .then((res)=>{
      console.log('请求成功',res);
    })
    .catch((err)=>{
      console.log('请求失败',err);
    })

  }

  return (
    <div className="OverDue">
      <div className='OverDue-icon'>
        <HomeOutlined className='OverDue-home' />
        <p>首页 / 催收管理 / 催收记录列表</p>
      </div>

      <div className='OverDue-search'>
        <Row gutter={24}>
          <Col>
            <Input defaultValue="" placeholder='姓名/手机号' onChange={onChange} />
          </Col>

          <Col>
            <Input defaultValue="" placeholder='借款编号' onChange={onChange2} />
          </Col>

          <Col>
          <Cascader placeholder="催收方式" options={options} onChange={onChange4} size='middle' className='Cascaders'/>
          </Col>

          <Col>
            <DatePicker.RangePicker onChange={onChange5}></DatePicker.RangePicker>
          </Col>

          <Button type="default" onClick={search} className='btn2'>
            <SearchOutlined /> 查询
          </Button >
        
        </Row>
      </div>

      <div className='OverDue-title'>
        <p>数据列表</p>
        <Button className='OverDue-button'><CloudUploadOutlined className="OverDue-icon"/>上传</Button>
      </div>

      <CollectionRecordsList />

    </div>
  )
}
